<template>
    <h-section title="相关文档" collapse>
        <div class="section-body">
            <a-row :gutter="48">
                <a-col :span="canShowOpinion ? 24 : 12">
                    <flexbox v-for="item of Object.keys(fileOptions)" :key="item" :class="['file-cont', fileOptions[item].disabled ? 'disabled-item' : '']">
                        <flexbox justify="center" class="file-cont-title">
                            {{ item }}
                        </flexbox>
                        <flexbox-item>
                            <flexbox justify="space-between" :class="['file-cont-body', fileOptions[item].disabled ? 'disabled-item' : '']">
                                <file-cell :border="false" :fileList="fileOptions[item].files" :span="24" :detail="detail" />
                                <flexbox justify="space-between" class="file-cont-edit" v-if="!fileOptions[item].disabled && canShowOpinion">
                                    <a-textarea placeholder="请输入评审意见限制200个字" v-model:value="form[fileOptions[item].opinionField]" :maxlength="200" auto-size v-if="canEditOpinion && !isShowHistoryDetail" />
                                    <span class="opinion-cont" v-html="form[fileOptions[item].opinionField]" v-else />
                                    <flexbox class="margin-l-8" style="width: 110px" v-if="canEditOpinion && !isShowHistoryDetail">
                                        <span @click="handleClear(fileOptions[item].opinionField)" :class="['margin-l-8', form[fileOptions[item].opinionField] ? 'canEdit' : 'disabledEdit']" v-if="form[fileOptions[item].opinionField]">清空</span>
                                    </flexbox>
                                </flexbox>
                            </flexbox>
                        </flexbox-item>
                    </flexbox>
                </a-col>
            </a-row>
        </div>
    </h-section>
</template>

<script lang="ts">
import FileCell from '@/components/FileCell/index.vue';
import api from '@/api';
import { message } from 'ant-design-vue';
import { defineComponent, reactive, toRefs, computed, watch } from 'vue';
export default defineComponent({
    name: 'BaseInfo',
    components: {
        FileCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        isShowHistoryDetail: { type: Boolean, default: false },
        stepStatus: { type: String, default: '' }
    },
    setup(props) {
        const state = reactive<any>({
            form: {
                files: [],
                startRequest: '',
                acceptRequest: '',
                productDoc: '',
                requestDoc: '',
                updatePack: '',
                schedule: '',
                testReport: '',
                reviewRecord: '',
                acceptance: ''
            },
            // 所有文件集合
            fileOptions: {}
        });
        // 只有产品内部评审和产品经理修改阶段可以显示逐条批注
        const canShowOpinion = computed(() => {
            return ['productAudit', 'productChange', 'devReview'].includes(props.stepStatus);
        });
        // 只有产品内部评审阶段可以进行逐条批注
        const canEditOpinion = computed(() => {
            return ['productAudit', 'devReview'].includes(props.stepStatus) && !props.disabled;
        });
        const handleSave = async (opinionField: string) => {
            if (!state.form[opinionField]) {
                return;
            }
            const query = {
                ...props.detail,
                ...state.form
            };
            const { success } = await api.versionModel.updateVersion(query);
            if (success) {
                message.success('操作成功');
            }
        };
        const handleClear = (opinionField: string) => {
            state.form[opinionField] = '';
            handleSave(opinionField);
        };
        // 初始化，并分类
        const initFile = () => {
            const fileOptions = {
                发起需求: { files: [], disabled: false, opinionField: 'startRequest' },
                需求受理信息: { files: [], disabled: false, opinionField: 'acceptRequest' },
                产品文档: { files: [], disabled: false, opinionField: 'productDoc' },
                需求文档: { files: [], disabled: false, stage: 1, opinionField: 'requestDoc' },
                更新包: { files: [], disabled: false, stage: 5, opinionField: 'updatePack' },
                排期: { files: [], disabled: false, stage: 4, opinionField: 'schedule' },
                测试报告: { files: [], disabled: false, stage: 6, opinionField: 'testReport' },
                验收交付: { files: [], disabled: false, stage: 8, opinionField: 'acceptance' }
            };
            Object.keys(fileOptions).forEach((key) => {
                const opinionField = fileOptions[key].opinionField;
                state.form[opinionField] = props.detail[opinionField];
                if (props.detail.processStatus) {
                    fileOptions[key].disabled = fileOptions[key].stage > props.detail.processStatus;
                } else {
                    if (fileOptions[key].stage) {
                        fileOptions[key].disabled = true;
                    }
                }
            });
            state.form.files.forEach((item) => {
                if (fileOptions[item.connectType]) {
                    fileOptions[item.connectType].files = fileOptions[item.connectType].files || [];
                    fileOptions[item.connectType].files.push(item);
                }
            });
            state.fileOptions = fileOptions;
        };
        const init = () => {
            state.form.files = props.detail.files;
            initFile();
        };
        init();
        watch(() => props.detail, init, { deep: true });
        return {
            ...toRefs(state),
            canShowOpinion,
            canEditOpinion,
            handleSave,
            handleClear
        };
    }
});
</script>
<style lang="less" scoped>
.disabled-item {
    background: #fafafa !important;
}
.file-cont {
    background: #eaf5fe;
    border: 1px solid #eee;
    & + .file-cont {
        border-top: none;
    }
    &-title {
        width: 117px;
        height: 100%;
    }
    &-edit {
        width: 50%;
        height: 100%;
        padding: 8px;
        font-size: 14px;
        .canEdit {
            cursor: pointer;
            color: @primary-color;
        }
        .disabledEdit {
            cursor: not-allowed;
            color: @disable-font-color;
        }
        .opinion-cont {
            white-space: pre-wrap;
            color: @error-color;
        }
    }
    &-body {
        position: relative;
        min-height: 56px;
        background: #fff;
        border-left: 1px solid #eee;
    }
}
</style>

